const WebpackDeepScopeAnalysisPlugin = require('webpack-deep-scope-plugin').default;
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');//压缩css插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const webpack = require('webpack');
const path = require('path');
const glob = require('glob-all');
const PurifyCSSPlugin = require('purifycss-webpack');

module.exports = {
    mode: 'production',
    entry: {
        index: './src/index.js',
        test: './src/test.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'js/[name][hash:5].bundle.js',
        chunkFilename: "[name]/[name][hash:5].js"
    },
    optimization:{
        //分割代码块
        splitChunks:{
            cacheGroups:{
                //公共模块抽离
                common:{
                    name:"common",//抽离出来的公共js文件名字
                    test:/[\\/]js[\\/]/,
                    chunks:"all",//选择抽离的范围:对所有文件生效
                    minSize:1,//包抽离出来的最少体积，默认30kb
                    // minChunk:2,//引入两次就给它抽离出来
                    priority:1,//数值越大优先级越高
                },
                //第三方库抽离
                verdor:{
                    name:'vender',
                    test:/[\\/]node_modules[\\/]/,
                    priority:10,//数值越大优先级越高
                    chunks:'all',//选择抽离的范围
                }
            }
        }
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                // use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']
                use: [{
                    loader: 'style-loader',
                }, {
                    loader: 'css-loader'
                }]
            },
            {
                test: /\.less$/,
                // use: [MiniCssExtractPlugin.loader, 'css-loader','less-loader']
                use: [{
                    loader: MiniCssExtractPlugin.loader,
                }, {
                    loader: 'css-loader'
                }, {
                    loader: 'postcss-loader',
                    options: {
                        ident: 'postcss',
                        plugins: [
                            require('postcss-cssnext')(),
                            // require('autoprefixer')(),
                            // require('cssnano')()//不好使
                        ]
                    }
                }, {
                    loader: 'less-loader'
                }]
            },
            {
                test: /\.(jpg|png|jpeg|gif)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            name: '[name][hash:5].[ext]',
                            limit: '10',//限制图片的大小小于10kb，进行base64位编码
                            outputPath: 'img',
                        }
                    },
                    {
                        loader: 'img-loader',//压缩图片
                        options: {
                            plugins: [
                                require('imagemin-pngquant')({
                                    quality: [0.3, 0.5]//压缩的质量系数
                                }),
                            ]
                        }
                    }
                ]
            },
            {
                test: /\.html$/,
                use: [
                    {
                        loader: 'html-loader',//处理html文件img的src路径的问题
                        options: {
                            attrs: ['img:src']
                        }
                    }
                ]
            }

        ]
    },
    plugins: [
        new MiniCssExtractPlugin({//单独抽离css
            // Options similar to the same options in webpackOptions.output
            // both options are optional
            filename: 'css/[name][hash:5].css',
            // chunkFilename: '[id].css',
        }),
        new OptimizeCssAssetsPlugin(),//压缩css
        new PurifyCSSPlugin({//对单独抽离的用到的样式并进行tree shaking
            // Give paths to parse for rules. These should be absolute!
            paths: glob.sync([
                path.join(__dirname, './*.html'),
                path.join(__dirname, './src/*.js'),
            ]),
        }),
        new WebpackDeepScopeAnalysisPlugin(),//对js进行tree shaking 
        new HtmlWebpackPlugin({
            chunks: ['common','vender','index'], //添加引入的js,也就是entry中的key
            filename: 'index.html',
            minify: {
                removeComments:true,//清理注释
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            // hash:true,
            title: 'hahaha',
            meta: [{
                name: 'keywords',
                content: '手机游戏_手机网游_安卓手机游戏下载_手机游戏排行_手游公会_联运平台_摩格手游_乐游网'
            }, {
                name: 'content',
                content: '乐游网手游平台为玩家提供免费手机游戏下载、手机游戏排行以及海量免费的手游礼包!乐游网还提供最新鲜好玩的手机游戏资讯、海量的手游攻略、手游评测、手游视频等内容!'
            }],
            template: './index.ejs',//模板地址
            favicon: './favicon.ico'
        }),
        new HtmlWebpackPlugin({
            chunks: ['common','vender','test'], //添加引入的js,也就是entry中的key
            filename: 'test.html',
            minify: {
                removeComments:true,//清理注释
                collapseWhitespace:true //折叠空白区域 也就是压缩代码
            },
            // hash:true,
            title: 'uuuu',
            meta: [{
                name: 'keywords',
                content: '我很帅'
            }, {
                name: 'content',
                content: '我很牛逼'
            }],
            template: './index.ejs', //模板地址
            favicon: './favicon.ico'
        }),
        new CleanWebpackPlugin(),
        new webpack.HotModuleReplacementPlugin(),
    ]
}

